<template>
  <el-scrollbar style="height: 20vh">
    <div class="emg">
      <div class="emg">
        <div
          class="Emoji"
          v-for="(item, index) in emojiList"
          @click="clickEmoji(item)"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  name: "Emoji",
  data() {
    return {
      emojiList: [
        "😀",
        "😃",
        "😄",
        "😁",
        "😆",
        "😅",
        "😂",
        "🤣",
        "😊",
        "😇",
        "🙂",
        "🙃",
        "😉",
        "😌",
        "😍",
        "😘",
        "😗",
        "😙",
        "😚",
        "😋",
        "😛",
        "😝",
        "😜",
        "🤓",
        "😎",
        "😏",
        "😒",
        "😞",
        "😔",
        "😟",
        "😕",
        "🙁",
        "😣",
        "😖",
        "😫",
        "😩",
        "😢",
        "😭",
        "😤",
        "😠",
        "😡",
        "😳",
        "😱",
        "😨",
        "🤗",
        "🤔",
        "😶",
        "😑",
        "😬",
        "🙄",
        "😯",
        "😴",
        "😷",
        "🤑",
        "😈",
        "🤡",
        "💩",
        "👻",
        "💀",
        "👀",
        "👣",
        "👐",
        "🙌",
        "👏",
        "🤝",
        "👍",
        "👎",
        "👊",
        "✊",
        "🤛",
        "🤜",
        "🤞",
        "🤘",
        "👌",
        "👈",
        "👉",
        "👆",
        "👇",
        "✋",
        "🤚",
        "🖐",
        "🖖",
        "👋",
        "🤙",
        "💪",
        "🖕",
        "🙏",
      ],
      // emojiList: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤓', '😎', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '😣', '😖', '😫', '😩', '😢', '😭', '😤', '😠', '😡', '😳', '😱', '😨', '🤗', '🤔', '😶', '😑', '😬', '🙄', '😯', '😴', '😷', '🤑', '😈', '🤡', '💩', '👻', '💀', '👀', '👣', '👐', '🙌', '👏', '🤝', '👍', '👎', '👊', '✊', '🤛', '🤜', '🤞', '🤘', '👌', '👈', '👉', '👆', '👇', '✋', '🤚', '🖐', '🖖', '👋', '🤙', '💪', '🖕', '🙏'];
    };
  },
  props: {},
  methods: {
    clickEmoji(item) {
      this.$emit("clickEmoji", item);
    },
  },
  created() {},
};
</script>
<style>
.emg {
  /* height: 18vh; */
  padding: 4px 4px 20px;
  justify-content: center;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  flex-wrap: wrap;
  /* height: 240px; */
  overflow: hidden;
}

.Emoji {
  width: 40px;
  height: 40px;
  padding: 3px;
  font-size: 24px;
  cursor: pointer;
}
</style>
